<template>
  <s-layout class="wallet-wrap" title="钱包">
    <!-- 钱包卡片 -->
    <view class="header-box ss-flex ss-row-center ss-col-center">
      <view class="card-box ui-BG-Main ui-Shadow-Main">
        <view class="card-head ss-flex ss-col-center">
          <view class="card-title ss-m-r-10">钱包余额（元）</view>
          <view
            @tap="state.showMoney = !state.showMoney"
            class="ss-eye-icon"
            :class="state.showMoney ? 'cicon-eye' : 'cicon-eye-off'"
          ></view>
        </view>
        <view class="ss-flex ss-row-between ss-col-center ss-m-t-64">
          <view class="money-num">{{
            state.showMoney ? userInfo.price || 0 : "*****"
          }}</view>
        </view>
      </view>
    </view>
    <!-- 钱包记录 -->
    <view>
      <scroll-view
        :scroll-top="scrollTop"
        scroll-y="true"
        class="scroll-Y"
        @scrolltoupper="upper"
        @scrolltolower="lower"
        @scroll="scroll"
      >
        <view class="list" v-for="item in datalist" :key="item.id">
          {{ item.remark }}
          <span style="font-size: 24rpx; margin-left: 2rpx"
            >({{ item.opType == 1 ? "收入" : "支出" }})</span
          >
          <view style="display: flex; justify-content: space-between">
            <view style="font-size: 24rpx">{{ item.createTime }}</view>
            <view style="color: #ff6000"> 金额:{{ item.opType == 1 ? "+" : "-" }}{{ item.amount }}元 </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </s-layout>
</template>

<script setup>
import { computed, watch, reactive, ref } from "vue";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import sheep from "@/sheep";
import dayjs from "dayjs";
import _ from "lodash";

const headerBg = sheep.$url.css("/static/img/shop/user/wallet_card_bg.png");

const pagination = {
  data: [],
  current_page: 1,
  total: 1,
  last_page: 1,
  expense: 0,
  income: 0,
};
// 数据
const state = reactive({
  showMoney: false,
  date: [],
  currentTab: 0,
  pagination,
  loadStatus: "",
  today: "",
});

const datalist = ref([]);

const moneylist = async () => {
  const data = await sheep.$api.order.getUserBalanceRecord({
    pageNumber: 0,
    pageSize: 1,
  });
  datalist.value = data.content;
  console.log(data, "我的值");
};
moneylist();

const status = ref(true);

const lower = async () => {
  // if (status.value) {
  //   const data = await sheep.$api.order.getUserBalanceRecord({
  //     pageNumber: 0,
  //     pageSize: 1,
  //   });
  //   datalist.value.push(...data.content);
  // } else {
  //   status.value = false;
  //   uni.showToast({
  //     title: "已经到底了",
  //     icon: "none", // 不显示图标
  //     duration: 2000, // 提示的延迟时间，单位毫秒，默认为 1500
  //   });
  // }

  console.log("滚动到底部了");
};

const userInfo = computed(() => sheep.$store("user").userInfo);

onLoad(async (options) => {
  state.today = dayjs().format("YYYY-MM-DD");
  state.date = [state.today, state.today];
  // getLogList();
});
</script>

<style lang="scss" scoped>
// 钱包
.header-box {
  background-color: $white;
  padding: 30rpx;

  .card-box {
    width: 100%;
    min-height: 300rpx;
    padding: 40rpx;
    background-size: 100% 100%;
    border-radius: 30rpx;
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-sizing: border-box;

    &::after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      z-index: 2;
      position: absolute;
      top: 0;
      left: 0;
      // background: v-bind(headerBg)
      // no-repeat;
      pointer-events: none;
    }

    .card-head {
      color: $white;
      font-size: 30rpx;
    }

    .ss-eye-icon {
      font-size: 40rpx;
      color: $white;
    }

    .money-num {
      font-size: 70rpx;
      line-height: 70rpx;
      font-weight: 500;
      color: $white;
      font-family: OPPOSANS;
    }

    .reduce-num {
      font-size: 26rpx;
      font-weight: 400;
      color: $white;
    }

    .topup-btn {
      width: 120rpx;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 30px;
      font-size: 26rpx;
      font-weight: 500;
      background-color: $white;
      color: var(--ui-BG-Main);
    }
  }
}

// 筛选

.filter-box {
  height: 114rpx;
  background-color: $bg-page;

  .total-box {
    font-size: 24rpx;
    font-weight: 500;
    color: $dark-9;
  }

  .date-btn {
    background-color: $white;
    line-height: 54rpx;
    border-radius: 27rpx;
    padding: 0 20rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: $dark-6;

    .ss-seldate-icon {
      font-size: 50rpx;
      color: $dark-9;
    }
  }
}

.tabs-box {
  background: $white;
  border-bottom: 2rpx solid #eeeeee;
}

// tab
.wallet-tab-card {
  .tab-item {
    height: 80rpx;
    position: relative;

    .tab-title {
      font-size: 30rpx;
    }

    .cur-tab-title {
      font-weight: $font-weight-bold;
    }

    .tab-line {
      width: 60rpx;
      height: 6rpx;
      border-radius: 6rpx;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 2rpx;
      background-color: var(--ui-BG-Main);
    }
  }
}

// 钱包记录
.wallet-list {
  padding: 30rpx;
  background-color: #ffff;

  .head-img {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    background: $gray-c;
  }

  .list-content {
    justify-content: space-between;
    align-items: flex-start;
    flex: 1;

    .title {
      font-size: 28rpx;
      color: $dark-3;
      width: 400rpx;
    }

    .time {
      color: $gray-c;
      font-size: 22rpx;
    }
  }

  .money {
    font-size: 28rpx;
    font-weight: bold;
    font-family: OPPOSANS;
    .add {
      color: var(--ui-BG-Main);
    }

    .minus {
      color: $dark-3;
    }
  }
}
.list {
  width: 90%;
  margin: 20rpx auto;
  border-radius: 20rpx;
  background-color: #fff;
  height: 150rpx;
  line-height: 60rpx;
  font-weight: 700;
  box-sizing: border-box;
  padding: 20rpx;
}
.scroll-Y {
  height: 70vh;
  margin-top: 20rpx;
}
</style>
